<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<meta http-equiv="Content-Script-Type" content="text/javascript" />
	<title>exValidationサンプル 2</title>
	<link type="text/css" rel="stylesheet" href="css/style.css" />
	<link type="text/css" rel="stylesheet" href="skin/selectable/style.css" />
	<link type="text/css" rel="stylesheet" href="css/exvalidation.css" />
</head>

<body>

<p class="note"><a href="http://5509.me/log/exvalidation">Archive</a> | <a href="http://5509.me/">5509</a></p>
<div class="pagebody">
	<h1>exValidation</h1>
	<form>
		<fieldset>
			<p class="attention">*は必須項目です</p>
			<table>
				<tbody>
					<tr>
						<th>Name<span>*</span></th>
						<td><input type="text" id="name" name="name" value="" /></td>
					</tr>
					<tr>
						<th>Kana<span>*</span></th>
						<td><input type="text" id="kana" name="kana" value="" /></td>
					</tr>
					<tr>
						<th>Mail<span>*</span></th>
						<td><span id="email"><input type="text" id="email" name="email" value="" />
						@
						<input type="text" name="email2" value="" /></span></td>
					</tr>
					<tr>
						<th>Password<span>*</span></th>
						<td><input type="password" id="pass" name="pass" value="" /></td>
					</tr>
					<tr>
						<th>Retype-Password<span>*</span></th>
						<td><input type="password" id="repass" name="repass" value="" /></td>
					</tr>
					<tr>
						<th>Sex<span>*</span></th>
						<td>
							<span id="radio">
								<label for="male"><input type="radio" id="male" name="sex" value="male" />male</label>
								<label for="female"><input type="radio" id="female" name="sex" value="female" />female</label>
							</span>
						</td>
					</tr>
					<tr>
						<th>Prefecture<span>*</span><br />
						this is selectable</th>
						<td>
					    	<select id="pref" name="pref" class="selectable"> 
					    		<optgroup label="---"> 
					    			<option value="">---</option> 
					    		</optgroup> 
					    		<optgroup label="北海道"> 
					    			<option value="01">北海道</option> 
					    		</optgroup> 
					    		<optgroup label="東北"> 
					    			<option value="02">青森県</option> 
					    			<option value="03">岩手県</option>	
					    			<option value="04">宮城県</option> 
					    			<option value="05">秋田県</option> 
					    			<option value="06">山形県</option> 
					    			<option value="07">福島県</option> 
					    		</optgroup> 
					    		<optgroup label="関東"> 
					    			<option value="08">東京都</option> 
					    			<option value="09">茨城県</option> 
					    			<option value="10">栃木県</option> 
					    			<option value="11">群馬県</option> 
					    			<option value="12">埼玉県</option> 
					    			<option value="13">千葉県</option> 
					    			<option value="14">神奈川県</option> 
					    		</optgroup> 
					    		<optgroup label="北陸"> 
					    			<option value="15">富山県</option> 
					    			<option value="16">石川県</option> 
					    			<option value="17">福井県</option> 
					    		</optgroup> 
					    		<optgroup label="甲信越"> 
					    			<option value="18">新潟県</option> 
					    			<option value="19">山梨県</option> 
					    			<option value="20">長野県</option> 
					    		</optgroup> 
					    		<optgroup label="東海"> 
					    			<option value="21">岐阜県</option> 
					    			<option value="22">静岡県</option> 
					    			<option value="23">愛知県</option> 
					    			<option value="24">三重県</option> 
					    		</optgroup> 
					    		<optgroup label="関西"> 
					    			<option value="25">滋賀県</option> 
					    			<option value="26">京都府</option> 
					    			<option value="27">大阪府</option> 
					    			<option value="28">兵庫県</option> 
					    			<option value="29">奈良県</option> 
					    			<option value="30">和歌山県</option> 
					    		</optgroup> 
					    		<optgroup label="中四国"> 
					    			<option value="31">鳥取県</option> 
					    			<option value="32">島根県</option> 
					    			<option value="33">岡山県</option> 
					    			<option value="34">広島県</option> 
					    			<option value="35">山口県</option> 
					    			<option value="36">徳島県</option> 
					    			<option value="37">香川県</option> 
					    			<option value="38">愛媛県</option> 
					    			<option value="39">高知県</option> 
					    		</optgroup> 
					    		<optgroup label="九州"> 
					    			<option value="40">福岡県</option> 
					    			<option value="41">佐賀県</option> 
					    			<option value="42">長崎県</option> 
					    			<option value="43">熊本県</option> 
					    			<option value="44">大分県</option> 
					    			<option value="45">宮崎県</option> 
					    			<option value="46">鹿児島県</option> 
					    		</optgroup> 
					    		<optgroup label="沖縄"> 
					    			<option value="47">沖縄県</option> 
					    		</optgroup> 
					    	</select> 
	    				</td>
					</tr>
					<tr>
						<th>City</th>
						<td><input type="text" name="city" value="" /></td>
					</tr>
					<tr>
						<th>Street</th>
						<td><input type="text" name="street" value="" /></td>
					</tr>
					<tr>
						<th>Favorite<span>*</span></th>
						<td>
							<span id="checkbox">
								<label for="f1"><input type="checkbox" id="f1" name="fav" value="f1">books</label>
								<label for="f2"><input type="checkbox" id="f2" name="fav" value="f2">music</label>
								<label for="f3"><input type="checkbox" id="f3" name="fav" value="f3">game</label>
								<label for="f4"><input type="checkbox" id="f4" name="fav" value="f4">study</label>
								<label for="f5"><input type="checkbox" id="f5" name="fav" value="f5">fishing</label>
							</span>
						</td>
					</tr>
				</tbody>
			</table>
		</fieldset>
		<p class="submit"><input type="submit" value="Submiiiiiiiiitttttt" class="button" /></p>
	</form>
</div>
<p class="copy">Copyright &copy <a href="http://5509.me/">5509</a> Some Rights Reserved.</p>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript" src="js/jQselectable.js"></script>
<script type="text/javascript" src="js/exvalidation.js"></script>
<script type="text/javascript" src="js/exchecker-ja.js"></script>
<script type="text/javascript">
	var validation = $("form")
		.exValidation({
			rules: {
				name: "required",
				kana: "required katakana",
				email: "required email hankaku group",
				pass: "required min6 max12",
				repass: "required retype-pass",
				radio: "radio",
				checkbox: "checkbox"
			},
			errInsertPos: 'after',
			errPosition: 'fixed'
		});
	var selectable = $('#pref').selectable({
		callback: function() {
			validation.laterCall('#pref');
		}
	});		
</script>
</body>
</html>